<template>
    <h2>@antv/s2 Vue3 Tooltip Demo</h2>
    <h3>方式2 (推荐): 自定义 Tooltip 类</h3>
    <div id="container2" />
</template>

<script>
import { defineCustomElement, render, createVNode ,onMounted} from "vue";
import { BaseTooltip, PivotSheet } from "@antv/s2";
import "@antv/s2/dist/style.min.css";
import CustomTooltip from '../utils/CustomTooltip'

export default {
    name: "App",
    setup(){
        fetch(
    "https://gw.alipayobjects.com/os/bmw-prod/2a5dbbc8-d0a7-4d02-b7c9-34f6ca63cff6.json"
        )
            .then((res) => res.json())
            .then((dataCfg) => {


                const s2OptionsForCutomTooltip = {
                    width: 600,
                    height: 350,
                    tooltip: {
                        showTooltip: true,
                        renderTooltip: (spreadsheet) => new CustomTooltip(spreadsheet),
                    },
                };

                const s2ForCustomTooltip = new PivotSheet(
                    document.getElementById("container2"),
                    dataCfg,
                    s2OptionsForCutomTooltip
                );
                s2ForCustomTooltip.render();
            });
    }
};
</script>

<style>
</style>
